<!DOCTYPE html>
<html>
<?php require 'header.php'; ?>
<body>

<?php require 'title.php'; ?>

<div class="layui-content" style="padding-top: 0px;">
    <div class="layui-container">
        <div class="layui-row">

            <?php require 'step.php'; ?>

            <div class="layui-col-md12">
                <div class="layui-card layui-fixed">
                    <div class="layui-card-header">
                        <span>3 创建数据库</span>
                        <span class="layui-card-version"><?= $versionInfo['code'] ?></span>
                    </div>
                    <form id="install_form" class="layui-form" style="margin-top: 20px;" action="./index.php?step=4"
                          method="post" wid100>
                        <div class="layui-card-body">
                            <input id="step" name="step" value="4" hidden="">
                            <input id="install"  name="install" value="0" hidden="">
                            <input id="type" name="type" value="mysql" hidden="">
                            <div class="layui-form-item ">
                                <label class="layui-form-label">数据库主机</label>
                                <div class="layui-input-inline">
                                    <input id="dbHost" type="text" name="dbHost" value="127.0.0.1" class="layui-input"
                                           lay-verType="tips" lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font> 必填
                                    数据库地址一般为127.0.0.1
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">端口</label>
                                <div class="layui-input-inline">
                                    <input id="dbPort" type="text" name="dbPort" value="3306" class="layui-input"
                                           lay-verType="tips" lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font> 必填 一般为3306端口号
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">数据库名</label>
                                <div class="layui-input-inline">
                                    <input id="dbName" type="text" name="dbName" value="kitegoadmin" class="layui-input"
                                           lay-verType="tips" lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">数据库用户名</label>
                                <div class="layui-input-inline">
                                    <input id="dbUser" type="text" name="dbUser" value="root" class="layui-input"
                                           lay-verType="tips" lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填 生产环境下建议使用独立账户
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">数据库密码</label>
                                <div class="layui-input-inline">
                                    <input id="dbPwd" type="text" name="dbPwd" value="root" class="layui-input"
                                           lay-verType="tips" lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">数据库前缀</label>
                                <div class="layui-input-inline">
                                    <input id="dbPrefix" type="text" name="dbPrefix" value="kg_" class="layui-input"
                                           lay-verType="tips"
                                           lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填 不建议修改数据库前缀
                                </div>
                            </div>
                            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                                <legend style="font-size: 16px">管理员信息</legend>
                            </fieldset>
                            <div class="layui-form-item">
                                <label class="layui-form-label">管理员名称</label>
                                <div class="layui-input-inline">
                                    <input id="adminName" type="text" name="adminName" value="admin" class="layui-input"
                                           lay-verType="tips"
                                           lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">管理员密码</label>
                                <div class="layui-input-inline">
                                    <input id="adminPwd" type="text" name="adminPwd" value="admin123" class="layui-input"
                                           lay-verType="tips"
                                           lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填
                                </div>
                            </div>
                            <div class="layui-form-item ">
                                <label class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input id="adminPwd2" type="text" name="adminPwd2" value="admin123" class="layui-input"
                                           lay-verType="tips"
                                           lay-verify="required">
                                </div>
                                <div class="layui-form-mid layui-word-aux"><font color="red">* </font>必填
                                </div>
                            </div>
                        </div>
                        <div class="layui-center" style="margin: 60px auto;">
                            <button type="button" onclick="window.history.go(-1);"
                                    class="layui-btn layui-btn-normal layui-btn-radius"
                                    style="border-radius:5px !important;">上一步
                            </button>
                            <button class="layui-btn layui-btn-normal layui-btn-radius" id="onCheck"
                                    style="border-radius:5px !important;">开始安装
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<?php require 'footer.php'; ?>

</body>


<script type="text/javascript">
    layui.use(['jquery', 'layer', 'form'], function () {
        var layer = layui.layer;
        var jquery = $ = layui.jquery;
        var form = layui.form;

        jquery('#stepOne').addClass('layui-active');
        jquery('#stepTwo').addClass('layui-active');
        jquery('#stepThree').addClass('layui-active');

        var hasError = <?= json_encode($hasError) ?>;
        var errorMessage = <?= json_encode($errorMessage) ?>;
        if (hasError) {
            layer.msg(errorMessage);
        }

        // 点击获取验证码
        jquery('#onCheck').on('click', function(e){
            e.preventDefault(); // 阻止表单的默认提交行为

            let formDataObj = {
                'step': 3,
                'install': $('#install').val(),
                'type': $('#type').val(),
                'dbHost': $('#dbHost').val(),
                'dbPort': $('#dbPort').val(),
                'dbName': $('#dbName').val(),
                'dbPrefix': $('#dbPrefix').val(),
                'dbUser': $('#dbUser').val(),
                'dbPwd': $('#dbPwd').val(),
                'adminName': $('#adminName').val(),
                'adminPwd': $('#adminPwd').val(),
                'adminPwd2': $('#adminPwd2').val(),
            };

            jquery.post('./index.php', formDataObj, function (res) {
                if (res.code === 200) {
                    jquery("#install_form").submit()
                } else {
                    layer.msg(res.message)
                }
            }, 'json');
        });
    })
</script>
</html>